<template>
	<view class="item">
		<!-- 新增 -->
		<view class="" style="display: flex;justify-content: space-between;height: 60rpx;">
			<view class="" style="width: 600rpx;">
				<text style="display: inline-block;font-size: 18rpx;width: 650rpx;">{{item.code}}.{{item.project_name}}</text>
			</view>
			<view class="img" v-if="noTitle">
				<view v-if="checkMode"  @click="handleSelect(item.id)" :class="`check ${selectList.indexOf(item.id) !== -1 ? 'check__on' : ''}`">
					<text class="iconfont icon-duigou"></text>
				</view>
			</view>
		</view>
		<!-- <view class="project" v-if="!noTitle">{{item.code}}.{{item.project_name}}</view> -->
		<view class="check-info">
			<text>检查人：{{item.check_user}}</text>
			<text>检查时间：{{ item.check_time ? item.check_time.substring(0, 10) : '-' }}
			</text>
		</view>
		<view class="img" style="background-color: #E6E6E6;">
			<!-- <view v-if="checkMode"  @click="handleSelect(item.id)" :class="`check ${selectList.indexOf(item.id) !== -1 ? 'check__on' : ''}`">
				<text class="iconfont icon-duigou"></text>
			</view> -->
			<u-swiper
				height="300"
				v-if="picArr.length > 1"
				:list="picArr"
				indicator
				indicatorMode="line"
				circular
			></u-swiper>
			<!-- <swiper class="swiper"
			:indicator-dots="indicatorDots"
			 :autoplay="autoplay" 
			 :interval="interval" 
			 :duration="duration">
				<swiper-item>
					<u-image width="685rpx" height="248rpx" class="img-file" mode="aspectFill" :fade="true" duration="300" :src="item.file_path ? item.file_path.replace(/\\/g,'/') : ''" :lazy-load="true">
						<view slot="error" style="font-size: 24rpx;">图片加载失败</view>
					</u-image>
				</swiper-item>
			</swiper> -->
			<u-image v-if="picArr.length == 1" width="100%" height="450rpx" class="img-file" mode="aspectFit" :fade="true" duration="300" :src="picArr[0]" :lazy-load="true">
				<view slot="error" style="font-size: 24rpx;">图片加载失败</view>
			</u-image>
		</view>
		<view class="info">
			<view class="info_line">
			<view class="info-item">
				<view class="label">类型
			</view>
				<view class="value" v-if = "item.check_type == 1">质量问题</view>
				<view class="value" v-if = "item.check_type == 2">安全问题</view>
				<view class="value" v-if = "item.check_type == 3">质量问题</view>
				<view class="value" v-if = "item.check_type == 4">其他问题</view>
			</view>
			<!-- <view class="info-item">
				<view class="label">违章库</view>
				<view class="value">{{item.peccancy_type}}</view>
			</view> -->
			<view class="info-item" v-if="item.check_type == 2">
				<view class="label">违章等级</view>
				<view class="value">{{item.issue_level}}</view>
			</view>
			<view class="info-item">
				<view class="label">责任人</view>
				<view class="value">{{item.zrr_name}}</view>
			</view>
			<!-- <view class="info-item">
				<view class="label">罚款</view>
				<view class="value">{{item.fk_money}}</view>
			</view> -->
			</view>
			<view class="info-item" style="width: 100%;margin-top: 10rpx;">
				<view class="label">内容</view>
				<view class="value">{{item.check_content}}</view>
			</view>
			<view class="info-item" style="width: 100%;margin-top: 10rpx;">
				<view class="label" v-if="item.check_type == 2">违章库</view>
				<view class="value">{{item.peccancy_type}}</view>
			</view>
		</view>
		<!-- 新增  下划线  -->
		<view class="" style="width: 100%;height: 8rpx;border-bottom: solid 4rpx #fff;">
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			noTitle: {
				type: Boolean,
				default: false
			},
			checkMode: {
				type: Boolean,
				default: false
			},
			selectList: {
				type: Array,
				default() {
					return []
				}
			}
		},
		methods: {
			compChange(){
				this.compChecked=true
			},
			handleSelect(id) {
				this.$emit('handleSelect', id);
			},
			typeName(){
				if(this.item.check_type==1){
					
				}
			},
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: false,
				interval: 0,
				duration: 500,
				picArr: [],
				compChecked:false
			}
		},
		mounted() {
			let arr = this.item.file_path ? this.item.file_path.split(',') : [];
			if (arr.length) {
				arr = arr.map(item => item.replace(/\\/g,'/'));
			}
			this.picArr = arr
		}
		
	}
</script>

<style lang="scss" scoped>
	.check{
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		box-sizing: border-box;
		border-radius: 50%;
		width: 42rpx;
		height: 42rpx;
		text-align: center;
		line-height: 42rpx;
		//  待定
		// background-color: #7f98ae;
		background-color: rgba(0, 0, 0, 0.7);
		.iconfont{
			font-size: 24rpx;
			color: #fff;
			display: none;
		}
		z-index: 999;
	}
	.check__on{
		background-color: #2e5efe;
		.iconfont{
			display: block;
		}
	}
	.item {
		border-bottom: solid 2rpx #e2e7f5;
		padding: 0 35rpx;
		box-sizing: border-box;
	}
		
	.project {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 36rpx;
		letter-spacing: 0rpx;
		color: #000000;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
	.check-info{
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 24rpx;
		line-height: 24rpx;
		margin-right: 20rpx;
		font-size: 18rpx;
		color: #7f98ae;
		margin-bottom: 10rpx;
		text{
			margin-right: 30rpx;
		}
	}
		
	.img {
		width: 100%;
		// background-color: #fff;
		// border-radius: 35rpx;
		position: relative;
		overflow: hidden;
		/deep/ {
			.u-image__error{
				width: 100%!important;
				height: 100%!important;
				top: 112rpx!important;
			}
		}
		
		// .problem-title {
		// 	position: absolute;
		// 	left: 0;
		// 	bottom: 0;
		// 	width: 100%;
		// 	height: 65rpx;
		// 	background-color: rgba(0, 0, 0, 0.7);
		// 	text-align: center;
		// 	line-height: 65rpx;
		// 	font-size: 26rpx;
		// 	font-weight: normal;
		// 	font-stretch: normal;
		// 	letter-spacing: 3rpx;
		// 	color: #ffffff;
		// }
	}
		
	.info {
		margin-top: 15rpx;
		margin-bottom: 30rpx;
		@include clear();
		
		.info_line{
			display: flex;
			justify-content: space-between;
		.info-item {
			flex: 1;		
			.label {
				height: 30rpx;
				font-family: SourceHanSansCN-Regular;
				font-size: 16rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 30rpx;
				letter-spacing: 0rpx;
				color: #8497ac;
				margin-bottom: 3rpx;
			}
		
			.value {
		
				font-size: 22rpx;
				font-weight: bold;
				font-stretch: normal;
				line-height: 34rpx;
				letter-spacing: 0rpx;
				color: #46464a;
			}
		}
		}
		.info-item {
			float: left;
			width: 33.3%;
		
			.label {
				height: 30rpx;
				font-family: SourceHanSansCN-Regular;
				font-size: 16rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 30rpx;
				letter-spacing: 0rpx;
				color: #8497ac;
				margin-bottom: 3rpx;
			}
		
			.value {
		
				font-size: 22rpx;
				font-weight: bold;
				font-stretch: normal;
				line-height: 34rpx;
				letter-spacing: 0rpx;
				color: #46464a;
			}
		}
	}

</style>
